<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<view class="u-search-box  cssBox">
			<view class="u-search-inner">
				<u-search v-model="searchKeyword" @change="search" shape="round" :clearabled="true" :show-action="true"
					actionText="新增" @custom="gotoAdd" input-align="left">
				</u-search>
			</view>
		</view>
		<uni-list v-for="(item,index) in equipmentList" :key="item.equipmentRealId">
			<u-swipe-action>
				<u-swipe-action-item :options="options" @click="click(item)">
					<uni-list-item direction="column" @longpress="longpress(item)">
						<template v-slot:body>
							<view class="uni-list-box">
								<view class="uni-thumb thumb-image">
									<u-album :urls="item.picUrl" multipleMode="aspectFill" multipleSize="120"
										maxCount="1" :showMore="false"></u-album>
								</view>
								<view class="uni-content equipment-item">
									<view class="uni-title-sub uni-equipmentName">{{item.name}}</view>
									<view class="uni-note uni-description">{{item.description}}</view>
								</view>
							</view>
						</template>
						<!-- 同步footer插槽定义列表底部的显示效果 -->
						<template v-slot:footer>
							<view class="uni-footer">
								<view class="cu-tag bg-olive light round" @click="goEdit(item.equipmentRealId)">编辑信息
								</view>
								<view class="cu-tag bg-orange light round" @click="goPoint(item)">测点管理
								</view>
							</view>
						</template>
					</uni-list-item>
				</u-swipe-action-item>
			</u-swipe-action>
		</uni-list>
		<!-- 复制弹窗 -->
		<view>
			<u-modal :show="show" title="复制后的设备名称为" :showCancelButton="true" @confirm="confirm" @cancel="cancel">
				<view style="width: 80%;">
					<u--input placeholder="请输入设备名称" border="bottom" v-model="copyvalue"></u--input>
				</view>
			</u-modal>
		</view>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" bgColor="#f2f2f2"></u-loadmore>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				copyequipmentid: '',
				copyvalue: '',
				show: false,
				options: [{
					text: '删除',
					icon: 'trash-fill',
					iconSize: '20',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#0055ff",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "设备列表",
						color: "#ffffff",
						fontSize: "20px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				userInfo: '',
				equipmentList: [],
				searchKeyword: '',
				pageSize: 6,
				count: 6,
				loadStatus: 'loadmore',
				pageIndex: 1,
				loadingText: '加载中...',
				loadmoreText: '上拉加载更多',
				nomoreText: '无数据'
			}

		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getEquipmentList();
		},
		methods: {
			onReachBottom() {
				this.loadStatus = "loadmore";
				if (this.count < this.pageSize) {
					this.loadStatus = "nomore";
				} else {
					setTimeout(() => {
						this.loadStatus = "loading";
						this.pageSize += 6;
						this.getEquipmentList();
					}, 1000);
				}
			},
			getEquipmentList() {
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getEquipmentList.replace("{userRealId}",
						this.userInfo.userRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
						name: this.searchKeyword
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						for (let items of res.data.data) {
							var arr = []
							for (let val of items.picUrl) {
								arr.push(getApp().globalData.serverAddress + val)
							}
							items.picUrl = arr
						}
						this.count = res.data.count
						this.equipmentList = res.data.data
						if (this.count < this.pageSize) {
							this.loadStatus = "nomore";
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			search() {
				this.getEquipmentList();
			},
			gotoAdd() {
				uni.redirectTo({
					url: '/pages/equipments/addEquipment'
				})
			},
			goEdit(value) {
				uni.redirectTo({
					url: '/pages/equipments/editEquipment?equipmentRealId=' + value
				})
			},
			goPoint(value) {
				uni.redirectTo({
					url: '/pages/equipments/pointList?equipmentRealId=' + value.equipmentRealId
				})
			},
			onLeftClick() {
				uni.switchTab({
					url: '/pages/tabbar/userCenter'
				});
			},
			//删除
			click(value) {
				uni.showModal({
					title: '温馨提示',
					content: '删除设备会同时删除设备下的所有的测点以及采集记录，并且不可恢复，是否确认删除？',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: getApp().globalData.serverAddress + this.$uri.Url_deleteequipment
									.replace("{userRealId}",
										this.userInfo.userRealId).replace("{equipmentRealId}",
										value.equipmentRealId),
								dataType: "json",
								method: "POST",
								success: (resData) => {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 1000
									});
									this.getEquipmentList();
								},
								fail: (resData) => {
									uni.showToast({
										title: 'resData.data.msg',
										icon: 'error',
										duration: 2000
									});
								}
							})
						}
					}
				})
			},
			longpress(value) {
				this.copyvalue = value.name
				this.copyequipmentid = value.equipmentRealId
				this.show = true
			},
			confirm() {
				if (this.copyvalue !== '') {
					if (this.copyvalue.length <= 14) {
						uni.request({
							url: getApp().globalData.serverAddress + this.$uri.Url_copyingEquipment.replace(
								"{userRealId}",
								this.userInfo.userRealId).replace("{equipmentRealId}",
								this.copyequipmentid),
							data: {
								equipmentName: this.copyvalue
							},
							dataType: "json",
							method: "POST",
							success: (res) => {
								if (res.data.code == 0) {
									this.show = false
									uni.showToast({
										title: '设备复制成功',
										icon: "success",
										duration: 2000
									});
									this.getEquipmentList();
								}
							},
							fail(res) {
								console.log(res);
							}
						})
					} else {
						uni.showToast({
							title: '设备名称不能超过14个字',
							icon: "none",
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						title: '设备名称不能为空',
						icon: "none",
						duration: 2000
					});
				}
			},
			cancel() {
				this.show = false
			}
		},
		onPullDownRefresh() {
			this.pageSize = 6;
			this.getEquipmentList();
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	.uni-thumb {
		width: 100px;
		height: 100px;
	}

	.u-album__row__wrapper image {
		width: 100px !important;
		height: 100px !important;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}

	.equipment-item {
		width: 1px;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
	}

	.uni-equipmentName {
		font-weight: bold;
		overflow: hidden;
		font-size: 20px;
		text-overflow: ellipsis;
	}

	.uni-description {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		font-size: 14px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.cu-tag {
		font-size: 14px;
		height: 30px;
	}

	.bottom-button {
		position: fixed;
		right: 20px;
		bottom: calc(var(--window-bottom) + 20px);
		z-index: 1030;
		margin-bottom: 6;
	}
</style>
